import React, { useState, useEffect } from 'react';
import {library} from '@fortawesome/fontawesome-svg-core'
import {fas} from '@fortawesome/free-solid-svg-icons'
// import Button, {ButtonType, ButtonSize} from './components/Button/button'
import Button from './components/Button/button'
import Menu from './components/Menu/menu'
import MenuItem from './components/Menu/menuItem'
import SubMenu from './components/Menu/subMenu'
import Transition from './components/Transition/transition'
import axios from 'axios';
library.add(fas)

const App: React.FC = () => {
  const [show, setShow] = useState(false)
  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(resp => {
      console.log(resp)
      
    })
  })
  return (
    <div className="App">
      <header className="App-header">
        <Menu defaultIndex={'0'} onSelect={(index) => {alert(index)}} mode='horizontal' defaultOpenSubMenus={['2']}>
          <MenuItem>cool link1</MenuItem>
          <MenuItem disabled>cool link2</MenuItem>
          <SubMenu title="dropdown">
            <MenuItem>dropdown 1</MenuItem>
            <MenuItem>dropdown 2</MenuItem>
          </SubMenu>
          <MenuItem>cool link3</MenuItem>
        </Menu>
        {/* <Button className="custom">Hello</Button>
        <Button disabled>Disable Button</Button>
        <Button btnType='Primary' size="lg">Hello</Button>
        <Button btnType='danger' size='sm'>Hello</Button>
        <Button btnType='link' href="https://www.baidu.com" target="_blank">Baidu Link</Button>
        <Button btnType='link' href="https://www.baidu.com" disabled>Disabled</Button> */}
        <Button size='lg' onClick = {()=>{setShow(!show)}}>Toggle</Button>
        <Transition in={show} timeout={300} animation="zoom-in-left"> 
          <p>
            Edit
          </p>
        </Transition>
        <Transition in={show} timeout={300} animation="zoom-in-left" wrapper>
          <Button btnType="Primary" size="lg">A Large Button</Button>
        </Transition>
      </header>
    </div>
  );
}

export default App;
